<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #parent {
            position: relative;
            margin: 50px auto;
            padding: 0;
            width: 590px;
            height: 470px;
        }

        #uls {
            position: relative;
            margin: 0;
            padding: 0;
            width: 590px;
            height: 470px;
            overflow: hidden;
        }

        #img_ul {
            position: absolute;
            margin: 0;
            padding: 0;
            left: 0;
            top: 0;
            width: 2360px;
            list-style: none;
        }

        #img_ul li {
            float: left;
            margin: 0;
            padding: 0;
            width: 590px;
            height: 470px;
        }

        #img_ul li img {
            width: 590px;
            height: 470px;
        }

        #litCir_ul {
            position: absolute;
            margin: 0;
            padding: 0;
            right: 10px;
            bottom: 10px;
            list-style: none;
        }

        #litCir_ul li {
            margin: 0;
            padding: 0;
            float: left;
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            border-radius: 50%;
            margin-left: 10px;
            cursor: pointer;
        }

        li.active {
            background-color: white;
        }

        li.quiet {
            background-color: #1e90ff;
        }

        #buttons {
            margin: 0;
            padding: 0;
        }

        #buttons span {
            position: absolute;
            width: 40px;
            height: 70px;
            top: 50%;
            margin-top: -20px;
            line-height: 70px;
            text-align: center;
            font-weight: bold;
            font-family: Simsun;
            font-size: 30px;
            border: 1px solid #fff;
            opacity: 0.3;
            cursor: pointer;
            color: #fff;
            background: black;
        }

        #left {
            left: 5px;
        }

        #right {
            left: 100%;
            margin-left: -45px;
        }
    </style>
</head>

<body>
    <div id="parent">
        <div id="uls">
            <ul id="img_ul">
                <li><img
                        src="https://img13.360buyimg.com/babel/s1180x940_jfs/t1/112612/27/8633/100927/5ed0ffe3Ee5006a06/142195ec551409e6.jpg.webp" />
                </li>
                <li><img
                        src="https://img10.360buyimg.com/pop/s1180x940_jfs/t1/133282/15/506/78667/5ece44afEd0d8193e/89395514aa661a69.jpg.webp" />
                </li>
                <li><img
                        src="https://img10.360buyimg.com/da/s1180x940_jfs/t1/120568/26/3467/101836/5ed0fda0E49973841/e1801a3d7e067ce7.jpg.webp" />
                </li>
                <li><img
                        src="https://imgcps.jd.com/ling/100008348542/5omL5py66LSt5a6e5oOg/5aSH6LSn6LaF5YC8/p-5bd8253082acdd181d02fa33/28403921/590x470.jpg" />
                </li>
            </ul>
            <ul id='litCir_ul'></ul>
        </div>
        <div id="buttons">
            <span id="left">&lt;</span>
            <span id="right">&gt;</span>
        </div>
</body>
<script>
    var parent = document.getElementById("parent");
    var img_ul = document.getElementById("img_ul");
    var litCir_ul = document.getElementById("litCir_ul");
    var buttons = document.getElementById("buttons");
    var cLis = litCir_ul.children;

    var len = img_ul.children.length; //图片张数
    var width = parent.offsetWidth; //每张图片的宽度
    var rate = 15; //一张图片的切换速度， 单位为px
    var times = 1; //切换速度的倍率
    var gap = 2000; //自动切换间隙， 单位为毫秒
    var timer = null; //初始化一个定时器
    var picN = 0; //当前显示的图片下标
    var cirN = 0; //当前显示图片的小圆点下标
    var temp;

    function Roll(distance) { //参数distance：滚动的目标点（必为图片宽度的倍数）
        clearInterval(img_ul.timer); //每次运行该函数必须清除之前的定时器！
        var speed = img_ul.offsetLeft < distance ? rate : (0 - rate); //判断图片移动的方向

        img_ul.timer = setInterval(function () { //设置定时器，每隔10毫秒，调用一次该匿名函数
            img_ul.style.left = img_ul.offsetLeft + speed + "px"; //每一次调用滚动到的地方 (速度为 speed px/10 ms)         
            var leave = distance - img_ul.offsetLeft; //距目标点剩余的px值      
            /*接近目标点时的处理，滚动接近目标时直接到达， 避免rate值设置不当时不能完整显示图片*/
            if (Math.abs(leave) <= Math.abs(speed)) {
                clearInterval(img_ul.timer);
                img_ul.style.left = distance + "px";
            }
        }, 10);
    }

    function autoRun() {
        picN++;
        cirN++;
        if (picN > len) { //滚动完克隆项后
            img_ul.style.left = 0; //改变left至真正的第一项处
            picN = 1; //从第二张开始显示
        }
        Roll(-picN * width);

        if (cirN > len - 1) { //判断是否到了最后一个圆点
            cirN = 0;
        }
        for (var i = 0; i < len; i++) {
            cLis[i].className = "quiet";
        }
        cLis[cirN].className = "active";
    }
    buttons.children[0].onclick = function () {
        picN--;
        cirN--;
        if (picN < 0) { //滚动完第一项后
            img_ul.style.left = -len * width + "px"; //改变left至克隆的第一项处
            picN = cirN = len - 1;
        }
        Roll(-picN * width);
        //bug处理
        if (cirN < 0) {
            cirN = len - 1;
        }
        for (var i = 0; i < len; i++) {
            cLis[i].className = "quiet";
        }
        cLis[cirN].className = "active";
    }
    /*下一张*/
    buttons.children[1].onclick = autoRun;
</script>

</html>